<template>
  <!-- 底部主菜单容器 -->
  <div class="docker">
    <span
      :class="{ docker__item: true, 'docker__item--active': index === currentIndex }"
      v-for="(item, index) in dockerList"
      :key="index"
    >
      <router-link :to="item.to">
        <div class="docker__item_icon">
          <i :class="item.icon"></i>
        </div>
        <div class="docker__item__title">{{ item.title }}</div>
      </router-link>
    </span>
  </div>
</template>

<script>
  export default {
    name: 'Docker',
    props: {
      currentIndex: {
        type: Number,
        required: true
      }
    },
    setup() {
      const dockerList = [
        {
          active: true,
          icon: 'custom-icon custom-icon-home',
          title: '首页',
          to: '/'
        },
        {
          icon: 'custom-icon custom-icon-shopping',
          title: '购物车',
          to: '/cartList'
        },
        {
          icon: 'custom-icon custom-icon-order',
          title: '订单',
          to: '/orderList'
        },
        {
          icon: 'custom-icon custom-icon-my',
          title: '我的',
          to: '/'
        }
      ]

      return { dockerList }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/style/viriables';
  @import '@/style/mixins';
  .docker {
    color: $content-font-color;
    display: flex; //自适应均赠,弹性盒子
    position: absolute; //绝对定位
    box-sizing: border-box; //这个会以body的最外层作为容器的最外层
    padding: 0 0.18rem;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.49rem;
    border-top: 1px solid $content-bg-color;
    &__item {
      flex: 1;
      text-align: center;
      a {
        color: $content-font-color;
        text-decoration: none;
      }
      &--active {
        a {
          color: #1fa4fc;
        }
      }
      &_icon {
        margin: 0.05rem 0 0.02rem 0; //图标距离上边距7px左右;
        font-size: 0.18rem;
      }
      &__title {
        //浏览器最小像素是12px，如果想表达12px以下大小得如下编写
        font-size: 0.12rem;
        transform: scale(0.5 0.5); //横向缩小50% 纵向搜小50%
        transform-origin: center top; //缩放的中心点
      }
    }
  }
</style>
